<!-- components/EditModal.vue -->
<template>
	<view class="edit-modal" v-if="visible">
		<view class="modal-content">
			<text class="modal-title">编辑</text>
			<textarea v-model="localText" class="edit-textarea" auto-height />
			<view class="modal-actions">
				<button class="cancel-btn" @click="close">取消</button>
				<button class="save-btn" @click="save">保存</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
	visible: Boolean,
	text: String
});

const emit = defineEmits(['save', 'close']);

const localText = ref(props.text);

watch(() => props.text, (newText) => {
	localText.value = newText;
});

const save = () => {
	emit('save', localText.value);
	close();
};

const close = () => {
	emit('close');
};
</script>

<style scoped>
.edit-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
    z-index: 9999;
}

.modal-content {
	background: white;
	padding: 30rpx;
	border-radius: 12rpx;
	width: 80%;
}

.modal-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.edit-textarea {
	width: 100%;
	min-height: 200rpx;
	border: 1rpx solid #ccc;
	border-radius: 8rpx;
	padding: 10rpx;
	font-size: 28rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 20rpx;
    gap: 30rpx;
}

.cancel-btn, .save-btn {
	padding: 10rpx 20rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
    flex: 1;
}

.cancel-btn {
	background: #f5f5f5;
	color: #333;
}

.save-btn {
	background: #007AFF;
	color: white;
}
</style>